<template>
  <div>
    <div
        id="pie-echart"
        class="pie-echart"
        style="width: 500px; height: 300px"></div>
<!--    展示maximum profit和maximum loss-->
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-statistic group-separator="," :precision="2" :value="expected_profit" :title="title1"></el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic group-separator="," :precision="2" decimal-separator="." :value="maximum_profit" :title="title2">
              <template slot="prefix">
                <i class="el-icon-s-flag" style="color: red"></i>
              </template>
              <template slot="suffix">
                <i class="el-icon-s-flag" style="color: red"></i>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic group-separator="," :precision="2" decimal-separator="." :value="maximum_loss" :title="title3">
              <template slot="prefix">
                <i class="el-icon-s-flag" style="color: blue"></i>
              </template>
              <template slot="suffix">
                <i class="el-icon-s-flag" style="color: blue"></i>
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
  data() {
    return {
      like: true,
      chart: null,
      title1: '预期收益率%',
      title2: '最大收益率%',
      title3: '最大亏损率%',
      maximum_profit: null,
      maximum_loss: null,
      expected_profit: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      axios({
        method: "get",
        url: "http://localhost:5000/usr/profile",
        params: {
          id: localStorage.getItem("user_id"),
        },
      }).then((res) => {
        console.log(res.data);
        localStorage.setItem('low_risk_ratio', res.data.low_risk_ratio)
        localStorage.setItem('high_risk_ratio', res.data.high_risk_ratio)
        localStorage.setItem('maximum_profit', res.data.maximum_profit)
        localStorage.setItem('maximum_loss', res.data.maximum_loss)
        localStorage.setItem('expected_profit', res.data.expected_profit)
        this.maximum_loss = res.data.maximum_loss*100;
        this.maximum_profit = res.data.maximum_profit*100;
        this.expected_profit = res.data.expected_profit*100;
        console.log(this.maximum_loss)
        console.log(this.maximum_profit)
        console.log(this.expected_profit)
      }, (err) => {
        console.log(err);
      });

      this.chart = echarts.init(document.getElementById("pie-echart"));
      this.chart.setOption({
        series: [{
          name: '用户资产分配推荐',
          type: 'pie',
          radius: ['50%','75%'],
          label: {
            normal: {
              formatter: '{b}' + '\n\r' + '({d}%)',
              show: true,
              position: 'left'
            },

          },
          data: [
            {value: localStorage.getItem('low_risk_ratio'), name: '中低风险资产'},
            {value: localStorage.getItem('high_risk_ratio'), name: '中高风险资产'}
          ],
          legend: {
            show: true,
            icon: 'circle',
            orient: 'vertical',
            left: 'left',
            data: ['中低风险资产', '中高风险资产']
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0,0,0,0.5)'
            }
          }
        }]
      })
    },
  }
}
</script>

<style lang="scss">
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>
